{extend name="base"}
{block name="main"}
<style type="text/css">
.ws-uploads{
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    width: 100%;
    height: 100%;
}
</style>
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<!-- <el-button type="warning" size="small" @click="onGet('{:url('updateCache')}')">更新缓存</el-button> -->
			<el-button type="primary" size="small" @click="add">添加用户</el-button>
		</el-col>
	</el-row>


	<el-table
		:default-expand-all="false"
		border
	    :data="tableData"
	    style="width: 100%">
	    <el-table-column
	      label="ID"
	      prop="id"
	      :width="80"
	      align="center">
	    </el-table-column>
	    <el-table-column
	      label="登录名"
	      prop="login_name">
	    </el-table-column>
	    <el-table-column
	      label="昵称"
	      prop="name">
	    </el-table-column>
	    
	    <el-table-column
	      label="用户头像"
	      align="center"
	      width="100"
	      >
		    <template slot-scope="head_img">
	        	<img v-if="head_img.row.head_img" :src="'/uploads'+head_img.row.head_img" style="width: 80px; height: 80px;border-radius: 50%;">
	        	
	        </template>
	    </el-table-column>
	    <el-table-column
	      label="备注"
	      align="center"
	      prop="remark">
	    </el-table-column>
	    <el-table-column
	      label="注册时间"
	      align="center"
	      prop="s_time"
	      :formatter="dateFormats">
	    </el-table-column>
	    <el-table-column
	      label="状态"
	      align="center"
	      prop="status"
	      >
	      	<template slot-scope="status">
        		<el-tag type="success" size="mini" v-if="status.row.status">启用</el-tag>
        		<el-tag type="info" size="mini" v-else>禁用</el-tag>
	        </template>
	    </el-table-column>
	    
	    <el-table-column label="操作" width="300">
	    	<template slot-scope="c">
				<el-button type="danger" class="ws-mini" size="mini" @click="_wspost('{:url(\'del\')}',{id:c.row.id})" v-if="c.row.id!=super_id&&{$user.id===config('auth.super_id')}">删除</el-button>
	    		<el-button v-if="c.row.id!=super_id&&c.row.status" class="ws-mini" type="info" size="mini" @click="close(c.row)">禁用</el-button>
	    		<el-button v-else-if="c.row.id!=super_id" class="ws-mini" type="primary" size="mini" @click="close(c.row)">启用</el-button>
				<el-button type="success" size="mini" @click="href('{:url('device')}?id='+c.row.id)" class="ws-mini">查看</el-button>
				<el-button type="success" size="mini" @click="edit(c.row)" class="ws-mini">编辑</el-button>
	    	</template>
	    </el-table-column>
	</el-table>

	<div class="page">{$list->render()|raw}</div>

	<!-- 修改用户信息 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="addVisible">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">
			<el-input type="hidden" v-model="data.id"></el-input>
			<el-form-item label="登录名" prop="login_name" @bulr="grant">
				<el-input v-model="data.login_name" placeholder="请输入用户名称" :disabled="!regdialog"></el-input>
			</el-form-item>
			<el-form-item label="昵称"prop="name">
				<el-input v-model="data.name" placeholder="请输入昵称"></el-input>
			</el-form-item>
			<el-form-item label="登录密码" v-if="regdialog" prop="login_pwd">
				<el-input type="password" v-model="data.login_pwd" placeholder="请输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="用户头像" v-else="regdialog" prop="login_name">
				<el-button type="primary" class="ws-uploads-btn" icon="el-icon-upload" style="font-size: 25px;" size="small">
                    <input type="file" class="ws-uploads" title=" " @change="onUploads(data.id,data.head_img,this.event)">
                </el-button>
                <img v-if="data.head_img" :src="'/uploads'+data.head_img" @click="delImg(data.head_img)" style="width: 100px; height: 100px;" />
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input type="textarea" v-model="data.remark" placeholder="备注"></el-input>
			</el-form-item>
			<el-form-item label="用户设备上限" prop="max_device">
				<el-input-number v-model="data.max_device" :min="0"></el-input-number>
			</el-form-item>
			<el-form-item label="设备微信上限" prop="max_weixin">
				<el-input-number v-model="data.max_weixin" :min="0"></el-input-number>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio-group v-model="data.status">
				    <el-radio :label="0">禁用</el-radio>
				    <el-radio :label="1">启用</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="addVisible = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'upduser\')}')">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 修改用户信息 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		addVisible:false, //添加菜单框
		dialogTitle:'修改用户信息',
		regdialog:false,
		data:{}, // 添加、编辑数据
		super_id:{:config('auth.super_id')},
		rules:{
			login_name:[
				{required: true, message:'请输入用户名称'},
			],
			name:[
				{required: true, message:'请输入真实姓名'},
			],
			login_pwd:[
				{required: true, message:'请输入登录密码'},
			],
			status:[
				{required: true, message:'请设置用户状态'},
			],
		},
	},
	watch:{
		// navsType(newVal){
		// 	location.href="{:url('')}?type="+this.navsType;
		// }
		newData:function(){
			console.log(23333);
		}
	},
	created(){
		this.emptyData();
		// console.log(login_name);
	},
	methods:{
		rowStyle(){
			return {'background-color':'#eee'}
		},
		emptyData(newData={}){
			this.data=Object.assign({
				login_name:'',
				login_pwd:'',
				name:'',
				max_weixin:100,
				max_device:100,
				remark:'',
				status:1,
			},newData);
		},
		showDialog(isShow=true){
			this.addVisible=isShow;
		},
		// 新增
		add(){
			this.dialogTitle='添加用户';
			this.regdialog=true;
			this.emptyData();
			this.showDialog();
		},
		// 编辑
		edit(row){
			this.dialogTitle='修改用户';
			this.regdialog=false;
			this.emptyData(row);
			this.showDialog();
		},
		// 禁用、启用用户
		close(row){
			this._wspost("{:url('close')}",{'id':row.id},res=>{
				if(res.code){
					row.status=!row.status;
				}
			},false);
		},
		// 上传媒体文件
		onUploads(id,img,e){
			let file=e.target.files[0]
				// mediaType=this.mediaType;
			// if(file.type.indexOf(type)===-1){
			// 	this.$message({
			// 		message:'该分组仅允许上传'+mediaType[type]+'文件',
			// 		type:'warning',
			// 	});
			// 	return;
			// }
        	let formData=new FormData();
        	formData.append('file',file);
        	formData.append('uid',id);
        	formData.append('head_img',img);
        	this.jqUpload("{:url('hloads')}",formData,res=>{
        			console.log(res);
        		if(res.status===0){
        			data=res.data;
        			// delete data.src;
        			this.data.head_img=data.head_img;
        			// this.submitData.images.push(data.id);
                    // 删除按钮
                    // this.wsImagesHtml+=this._pushImages(data.src,data.type,'',data.id);
        		}
        	})
		},
		// 分配权限
		grant(row,data){
			console.log(11111)
			// let ids=data.checkedKeys;
			// let defaultCheckAuth=this.defaultCheckAuth;
			// let diff=[];
			// if(ids.length>defaultCheckAuth.length){
			// 	let defaults=new Set(defaultCheckAuth)
			// 	diff=ids.filter(x=>!defaults.has(x));
			// }else{
			// 	let ids_set=new Set(ids)
			// 	diff=defaultCheckAuth.filter(x=>!ids_set.has(x));
			// }
			// this._wspost("{:url('grant')}",{diff,role_id:this.role_id,module:this.navs_module},res=>{
			// 	if(res.code===0){ // 还原
			// 		this.setCheckedNavs(defaultCheckAuth);
			// 	}else{
			// 		this.defaultCheckAuth=ids;
			// 	}
			// },false);
		},
	},
});
</script>
{/block}